<template>
  <div class="DepartmentMemberManage-container">
    <h3>请选择部门:</h3>
    <DepartmentCascader @SelectDepartment="SelectDepartment" />
    <div class="DepartmentMemberManage-table"
         v-if="departmentMemberList.length">
      <el-table :data="departmentMemberList"
                border
                stripe
                max-height="80%"
                :default-sort="{prop: 'date', order: 'descending'}"
                style="width: 100%">
        <el-table-column label="创建日期"
                         sortable
                         width="180">
          <template slot-scope="scope">
            <svg-icon icon-class="date"></svg-icon>
            <span style="margin-left: 10px">{{ scope.row.create_time|formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名"
                         width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱">
          <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         fixed="right">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="info"
                       @click="MigrateDepartment(scope.$index, scope.row)">迁移部门</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination small
                     :page-size="limit"
                     @current-change="pageChange"
                     layout="prev, pager, next"
                     :total="count">
      </el-pagination>
    </div>
    <!-- <div v-else
         style="display:flex;justify-content:center">
      <img style="width:50%;margin:0 auto"
           src="@/assets/img/search-empty.png">
    </div> -->
    <EditDialog :data="EditForm"
                dialogTitle="编辑公告"
                :visible="EditDialogVisible"
                @custom-confirm="EditConfirm"
                @custom-close="EditDialogClose" />
    <MigrateDialog dialogTitle="迁移部门"
                   :visible="MigrateDialogVisible"
                   @custom-confirm="MigrateConfirm"
                   @custom-close="MigrateDialogClose" />
  </div>
</template>

<script>
import DepartmentCascader from '@/components/Tools/DepartmentCascader'
import { encryptData } from "@/utils/encrypt"
import EditDialog from '@/components/Dialog/EditDialog'
import MigrateDialog from '@/components/Dialog/MigrateDialog'
export default {
  components: {
    EditDialog,
    DepartmentCascader,
    MigrateDialog
  },
  data () {
    return {
      limit: 10,
      page: 1,
      count: 0,
      // 公告列表
      departmentMemberList: [],
      content: "",
      // 编辑数据
      EditDialogVisible: false,
      formLabelWidth: '80px',
      // 分配角色对话框显示标志位
      distributeDialogVisible: false,
      // 编辑表单
      EditForm: {
      },
      // 公告所有的角色列表
      departmentMemberList: [],
      // 部门id
      departmentId: null,
      // 迁徙窗口显示标志位
      MigrateDialogVisible: false,
      MigrateUser: {} // 当前在迁移的部门
    }
  },
  computed: {
  },
  created () {
  },
  methods: {
    // 迁徙部门确定回调
    async MigrateConfirm (department_id) {
      console.log(department_id)
      // 整理数据
      const datas = this.$qs.stringify({
        user_id: this.MigrateUser.id,
        department_id: department_id
      })
      const res = await this.$API.department.MigrateDepartment(datas)
      if (res.status == 200) {
        this.$message.success("修改成功")
        // 初始化数据
        this.getDepartmentMemberList()
      }
    },
    pageChange (page) {
      this.page = page
      this.getDepartmentMemberList()
    },
    // 迁移部门窗口关闭回调
    MigrateDialogClose () {
      // 初始化数据
      this.MigrateDialogVisible = false
      this.MigrateUser = {}
    },
    // 获取用户列表
    async getDepartmentMemberList () {
      const { limit, page } = this
      const res = await this.$API.department.getDepartmentMember(this.departmentId, limit, page)
      if (res.status == 200) {
        this.departmentMemberList = res.data.payload
        this.departmentMemberCount = res.data.count
      }
    },
    // 选择部门
    SelectDepartment (id) {
      this.departmentId = id
      this.getDepartmentMemberList()
    },
    // 编辑公告
    async handleEdit (id, user) {
      console.log(user)
      // 整理数据
      let datas = {
        id: user.id, email: user.email, password: "",
        name: user.name
      }
      // 获取数据
      this.EditForm = datas
      this.EditDialogVisible = true
    },
    // 删除公告
    handleDelete (id, departmentMember) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let datas = new FormData();
        datas.append('departmentMember_id', departmentMember.id);
        const res = await this.$API.departmentMember.DeleteDepartmentMember(datas)
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // 初始化数据
          this.getDepartmentMemberList()
          this.content = ""
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 搜索公告
    async SearchDepartmentMembers () {
      this.page = 1
      const { content, page, limit } = this
      console.log(content, page, limit)
      // 如果不存在搜索内容就获取全部
      if (!this.content) return this.getDepartmentMemberList()
      const res = await this.$API.departmentMember.SearchDepartmentMembers(content, limit, page)
      // 如果不存在公告就显示空
      if (!res.data) this.departmentMemberList = []
      console.log(res)
      if (res.status == 200) {
        this.departmentMemberList = res.data.payload
        this.count = res.data.count
      }
    },
    // 关闭对话框
    EditDialogClose () {
      this.EditDialogVisible = false
    },
    // 确定编辑
    async EditConfirm (formData) {
      // 整理数据
      let { id, password, email, name } = formData
      const datas = {
        user_id: id,
        password: encryptData(password),
        email,
        name
      }
      console.log(encryptData(password))
      const res = await this.$API.user.EditUser(this.$qs.stringify(datas))
      if (res.status == 200) {
        this.$message.success("编辑成功")
        // 初始化数据
        this.EditDialogVisible = false
        this.content = ""

        this.getDepartmentMemberList()
        this.EditForm = {}
      } else {
        this.$message.error("编辑失败")
      }
    },
    // 迁移部门
    MigrateDepartment (index, user) {
      this.MigrateDialogVisible = true
      this.MigrateUser = user
    }
  }
}
</script>
<style scoped>
.DepartmentMemberManage-container {
  width: 100%;
  padding: 20px;
}
.DepartmentMemberManage-table {
  width: 100%;
  margin: 10px auto;
}
</style>